<template>
    <div>
        <div>
            <van-nav-bar title="浏览记录" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
    </div>
    <div class="shoucang" v-if="datas.data.length != 0">
        <div v-for="item, i in datas.data" :key="item.id">
            <van-swipe-cell>
                <van-card @click="seleteListData(item)" num="2" :price="item.price" :desc="item.type" :title="item.title"
                    :thumb="item.url" />
                <template #right>
                    <van-button square @click="removesc(item.id, i)" text="删除" type="danger" class="delete-button" />
                </template>
            </van-swipe-cell>
        </div>
    </div>
    <div v-else>
        <van-empty description="你还没有添加商品到购物车" />
    </div>
</template>

<script setup lang="ts">
import { selecthistory, removehistory } from '@/api/index'
import { useStore } from 'vuex';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
let store = useStore()
let router = useRouter()
const onClickLeft = () => history.back();
console.log(store.state.userData[0].id);

let datas = reactive({
    data: [] as any
})
selecthistory(store.state.userData[0].id).then((result) => {
    datas.data = result.data.data

}).catch((err) => {

});

let seleteListData = (data: any) => {
    router.push({
        path: `/xiangqing`
    })
    store.commit('updataxiangqingdata', data)
}
let removesc = (shoppingid: Number, index: Number) => {

    removehistory(store.state.userData[0].id, shoppingid).then((result: any) => {
        showToast('删除成功')
        let datass = [] as any
        console.log(datas.data);

        datas.data.forEach((element: any, i: Number) => {
            if (index != i) {
                datass.push(element)
            }
        });
        datas.data = datass
    }).catch((err: any) => {
        showToast('删除失败，网络出现了状况')
    });
}
</script>

<style lang="less" scoped>
.delete-button{
    background-color: #ffffff;
    color: #333333;
    border: none;
}
.shoucang {
    >div {
        margin-top: 20rem;

    }

}

.van-nav-bar .van-icon{
    color: #333333;
}
.van-nav-bar__text{
    color: #333333;
}
</style>